<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="utf-8"/>
</head>
<body style="height: 100%; margin: 0">
<!-- 文件上传控件 -->
<input type="file" id="fileInput" accept=".xlsx" style="display: none;" />
<button id="fileInputBut" onclick="document.getElementById('fileInput').click()">选择Excel文件</button>
<div id="container" style="height: 100%"></div>

<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.full.min.js"></script>
<script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, { // 移除主题参数使用自定义
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};
    var option;
    document.getElementById('fileInput').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (!file) return;
        // 读取Excel文件
        const reader = new FileReader();
        reader.onload = function(e) {
            const data = new Uint8Array(e.target.result);
            const workbook = XLSX.read(data, {type: 'array'});
            const sheetName = workbook.SheetNames[3]; // 取第一个工作表
            const worksheet = workbook.Sheets[sheetName];
            const json = XLSX.utils.sheet_to_json(worksheet, {header:1});
            var hearderData01 = []
            var hearderData02 = []
            var hearderData03 = []
            var hearderData04 = []
            for (let row of json.slice(1)) {
                if (row[0] !== undefined) {
                    hearderData01.push(Number(row[0]));
                }
                if (row[1] !== undefined) {
                    hearderData02.push(Number(row[1]));
                }
                if (row[2] !== undefined) {
                    hearderData03.push(Number(row[2]));
                }
                if (row[3] !== undefined) {
                    hearderData04.push(Number(row[3]));
                }
            }
            option = {
                title: [
                    {
                        text: '航海用户专注度箱线图',
                        left: 'center',
                        textStyle: { color: '#333' }
                    },
                    {
                        text: 'upper: Q3 + 1.5 * IQR \nlower: Q1 - 1.5 * IQR',
                        borderColor: '#999',
                        borderWidth: 1,
                        textStyle: {
                            color: '#333',
                            fontWeight: 'normal',
                            fontSize: 14,
                            lineHeight: 20
                        },
                        left: '10%',
                        top: '90%'
                    }
                ],
                color: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEEAD'], // 定义活力色板
                backgroundColor: '#F5F5F5', // 浅灰色背景
                dataset: [
                    {
                        source: [
                            hearderData01,
                            hearderData02,
                            hearderData03,
                            hearderData04
                        ]
                    },
                    {
                        transform: {
                            type: 'boxplot',
                            config: {
                                itemNameFormatter: function(params) {
                                    return ["又一", "恬豆", "沐霂", "梨安"][params.value];
                                }
                            }
                        }
                    },
                    {
                        fromDatasetIndex: 1,
                        fromTransformResult: 1
                    }
                ],
                tooltip: {
                    trigger: 'item',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                grid: {
                    left: '10%',
                    right: '10%',
                    bottom: '15%'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: true,
                    nameGap: 30,
                    axisLine: {
                        lineStyle: { color: '#333' }
                    },
                    axisLabel: {
                        color: '#666'
                    },
                    splitLine: {
                        lineStyle: { color: '#eee' }
                    },
                    splitArea: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '0 <= Focus <= 1',
                    axisLine: {
                        lineStyle: { color: '#333' }
                    },
                    axisLabel: {
                        color: '#666'
                    },
                    splitLine: {
                        lineStyle: { color: '#eee' }
                    },
                    splitArea: {
                        show: true,
                        areaStyle: { color: ['#f5f5f5', 'transparent'] }
                    }
                },
                series: [
                    {
                        name: 'boxplot',
                        type: 'boxplot',
                        datasetIndex: 1,
                        itemStyle: {
                            color: '#4ECDC4', // 主箱体颜色
                            borderColor: '#333' // 边框对比色
                        }
                    },
                    {
                        name: 'outlier',
                        type: 'scatter',
                        datasetIndex: 2,
                        itemStyle: {
                            color: '#FF6B6B', // 离群点鲜艳红色
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        symbolSize: 8 // 增大离群点尺寸
                    }
                ]
            };
            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }
        }
        reader.readAsArrayBuffer(file);
        document.getElementById('fileInputBut').style.display = 'none';
        // if (option && typeof option === 'object') {
        //     myChart.setOption(option);
        // }
    })


    window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>